<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app1">
    {{mess}}
</div>
<div id="app2">
    {{mess}}
    <br>
    <input type="button" v-on:click="myClick()" value="按钮">
    <input type="button" @click="myClick()" value="按钮">
    <div v-on:click="changeMess('你好呀',$event)" style="width: 50px;height: 50px;background-color: aqua">
        {{msg}}
    </div>
    <input type="text" v-on:keydown="keyDownFun($event)">
    <input type="text" v-on:keydown="keyDownFun">
</div>

<div id="app3">
    <div v-on:mousemove="fun1" style="width: 220px;height: 100px;background-color: red">
        <textarea v-on:mousemove="fun2($event)">我是文本区域</textarea>
        <textarea v-on:mousemove="fun2">我是文本区域</textarea>
    </div>
    <!--阻止默认事件-->
    <form @submi.prevent action="http://www.baidu.com">
        <input type="submit" value="提交">
    </form>

    <!--阻止冒泡事件-->
    <div @click="fun1">
        <a @click.stop href="http://www.jd.com">京东</a>
    </div>
    <div @click="fun1">
        <a href="http://www.jd.com">京东</a>
    </div>

    <button @click="num++">增加</button>
    <button @click="decrement">减少</button>
    <button @click="num--">减少</button>
    <h3>num={{num}}</h3>

    <!--阻止冒泡-->
    <div style="width: 250px;background-color: aqua" @click="print('div被点击了')">
        <button @click.stop="print('button被点击了')">点我试试</button>
    </div>
    <a href="http://www.itcast.cn" @click="print('点击了超连接诶')">传智播客</a>
    <!--阻止默认事件-->
    <a href="http://www.itcast.cn" @click.prevent="print('点击了超连接诶')">传智播客</a>

    <!--阻止单击事件继续传播-->
    <a v-on:click.stop="doThis">阻止单击事件继续传播</a>
    <!--提交事件不再重载页面-->
    <form v-on:submit.prevent="onSubmit">
        提交事件不再重载页面
    <input type="submit" value="提交">
    </form>
    <!--修饰符可以串联-->
    <a v-on:click.stop.prevent="doThis">修饰符可以串联</a>

    <!--只有修饰符-->
    <form v-on:submit.prevent>
        只有修饰符
        <input type="submit" value="提交">
    </form>

    <div v-on:click.capture="doThis">事件监听器</div>
    <div v-on:click.self="doThis">当前元素触发</div>

    <div id="app">
        <!--监听回车按下-->
        <input type="text" v-on:keyup.enter="fun1">
    </div>
</div>
<script>
    new Vue({
        el:"#app1",
        data:{
            mess:"pig1"
        }
    });

    new Vue({
        el:"#app2",
        data:{
            mess:"pig2",
            msg:"you pig"
        },
        methods:{
            myClick:function (e) {
                alert("点击了我,我是app2的东西")
            },
            changeMess:function (msg,event) {
                this.msg=msg;
                event.stopPropagation();
            },
            /*$event-事件对象
                使用不带圆括号的形式，event 对象将被自动当做实参传入:v-on:keydown="fun2"
                使用带圆括号的形式，我们需要使用 \$event 变量显式传入 event 对象:v-on:keydown="fun2($event)"*/
            keyDownFun:function (event) {
                // alert("键盘按下了"+event.keyCode)
                if(!(event.keyCode>=48 && event.keyCode<=57)){
                    alert("请输入数字")
                    event.preventDefault(); //阻止默认行为
                }
            }
        }
    });

    new Vue({
        el:"#app3",
        data:{
            mess:"pig3",
            num:1
        },
        methods: {
            fun1:function () {
                alert("我是父元素div")
            },
            fun2:function (event) {
                alert("我是子元素textarea");
                event.stopPropagation();    //阻止冒泡
            },
            //递减
            decrement(){
                if(this.num>0){
                    this.num--;
                }else {
                    this.num=0;
                }
            },
            //打印
            print(str){
                console.log(str);
            },
            doThis(){
                console.log("做这个")
            },
            doThat(){
                console.log("做那个")
            },
            onSubmit(){
                console.log("提交表单")
            },
            /*后写的同名方法会覆盖*/
            /*fun1 : function() {
                location.href="https://www.baidu.com";
            }*/
        }
    });
</script>
</body>
</html>